<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts主题
import resize from './mixins/resize'

const date = new Date()
const month = date.getMonth() + 1
const day = date.getDate()
const xdata = []
for (let i = 1; i <= day; i++) {
  xdata.push(month + '.' + i)
}

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
      console.log(this.chartData)
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        xAxis: {
          // 横坐标
          data: xdata,
          // 两端边界
          boundaryGap: true,
          axisTick: {
            // 下竖线
            show: false
          }
        },
        grid: {
          left: 10, // 图表网格左边距
          right: 10, // 图表网格右边距
          bottom: 20, // 图表网格底边距
          top: 30, // 图表网格顶边距
          containLabel: true // 是否包含标签
        },
        tooltip: {
          trigger: 'axis', // 提示框触发类型为坐标轴触发
          axisPointer: {
            type: 'cross' // 坐标轴指示器类型为十字准星指示器
          },
          padding: [5, 10] // 提示框内边距
        },
        yAxis: {
          axisTick: {
            show: false // 是否显示刻度线
          }
        },
        legend: {
          data: ['期望', '实际'] // 图例的数据
        },
        series: [{
          name: '期望', // 系列名称为 'expected'
          itemStyle: {
            normal: {
              color: '#FF005A', // 期望数据线的颜色
              lineStyle: {
                color: '#FF005A', // 期望数据线的颜色
                width: 2 // 期望数据线的宽度
              }
            }
          },
          smooth: true, // 使用平滑曲线
          type: 'line', // 系列类型为线型图
          data: expectedData, // 期望数据
          animationDuration: 2800, // 动画时长为 2.8 秒
          animationEasing: 'cubicInOut' // 动画缓动函数为 cubicInOut
        },
        {
          name: '实际', // 系列名称为 'actual'
          smooth: true, // 使用平滑曲线
          type: 'line', // 系列类型为线型图
          itemStyle: {
            normal: {
              color: '#3888fa', // 实际数据线的颜色
              lineStyle: {
                color: '#3888fa', // 实际数据线的颜色
                width: 2 // 实际数据线的宽度
              },
              areaStyle: {
                color: '#f3f8ff' // 区域填充颜色
              }
            }
          },
          data: actualData, // 实际数据
          animationDuration: 2800, // 动画时长为 2.8 秒
          animationEasing: 'quadraticOut'// 动画缓动函数为 quadraticOut
        }]
      })
    }
  }
}
</script>
